<!-- 报名 -->
<template>
	<view class="container">
	<!-- 	<view class="c-header" v-if="status!='student'">
			<view class="header" @click="onGameStudenList">
				<text>查看我的学生>></text>
			</view>
			<view class="header-placeholder">
				
			</view>
		</view> -->
		<view class="c-form">
			<u-form :model="otherInfo" :rules="rules" ref="form">
				<view class="" v-if="studentInfo">
					<view class="form-headline">
						<text>报名组别</text>
						<text :style="{'color':'red'}">*</text>
						<u-line></u-line>
					</view>
					<view class="form-select">
						<u-form-item labelWidth="0">
							<view class="" style="background-color: #fff;">
								<uni-data-select emptyText="暂无分组" v-if="groupList"
									:localdata="groupList" placeholder="选择参赛组别" @change="groupChange">
								</uni-data-select>
							</view>
							
						</u-form-item>
						<u-form-item prop="group_id" labelWidth="0" v-if="cate_id!=0">
							<view class="" style="background-color: #fff;">
							<uni-data-select v-model="otherInfo.group_id" emptyText="暂无分组" :localdata="subGroupList" placeholder="选择参赛组别" @change="subGroupChange">
							</uni-data-select>
							</view>
						</u-form-item>
					</view>
					<view class="form-headline">
						<text>演奏信息</text>
						<text :style="{'color':'red'}">*</text>
						<u-line></u-line>
					</view>
					<view class="form-edit">
						<u-form-item prop="act_song" labelWidth="0">
							<u-input placeholder="填写演奏曲目" v-model="otherInfo.act_song" :custom-style="{'background-color':'#fff'}"></u-input>
						</u-form-item>
						<u-form-item prop="act_duration" labelWidth="0">
							<view @click="timePicker = true">
								<u-input placeholder="选择演奏时长" v-model="otherInfo.act_duration" :custom-style="{'background-color':'#fff'}" disabled></u-input>
							</view>

							<u-datetime-picker :show="timePicker" ref="datetimePicker" :formatter="formatter" v-model="otherInfo.act_duration"
								:maxHour="20" mode="time" closeOnClickOverlay @confirm="timePicker=false"
								@cancel="timePicker=false" @close="timePicker=false"></u-datetime-picker>

						</u-form-item>
					</view>
				</view>
				<view class="form-headline">
					<text>参赛信息</text>
					<text :style="{'color':'red'}">*</text>
					<u-line></u-line>
				</view>
				
				<view class="form-search" v-if="status=='teacher' || status=='org'">

					<u-form-item>
						<!-- <view class="search-info">
							<u-input placeholder="输入学生身份证号" :custom-style="{'background-color':'#fff'}" v-model="searchs"></u-input>
							<view class="search-info-btn">
								<button type="default" @click="searchStudentInfo">查询</button>
							</view>
						</view> -->
					</u-form-item>
					<view class="search-hint" v-if="!studentInfo">
						<view class="">
							<text @click="onGameStudenList">查看我的学生列表 ></text>
						</view>
						<view>
							<text @click="toAddStudentInfo">立即添加学生信息 ></text>
						</view>
					</view>
				</view>
				<view class="form-info" v-if="studentInfo">
					<view class="">
						<StudentModule :info="studentInfo"></StudentModule>
					</view>
					<view class="m-btn">
						<view class="btn-block" v-if="status=='student'">
							<u-button type="primary" text="修改" @click="toStudentEditInfo" shape="circle"></u-button>
						</view>
						<view class="btn-block">
							<u-button type="success" text="报名" @click="toGameCheckSignUp" shape="circle"></u-button>
						</view>
					</view>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import StudentModule from "@/pages/pages_game/module/StudentModule.vue"
	export default {
		name: "",
		components: {
			StudentModule
		},
		data() {
			return {
				// 父级分类id
				cate_id:0,
				// 时间选择控件
				timePicker: false,
				// 校验规则
				rules: {
					'group_id': {
						type: "number",
						required: true,
						message: '前选择参赛组别',
						trigger: ['blur', 'change'],
					},
					'act_song': {
						required: true,
						message: '请填写参赛曲目',
						trigger: ['blur', 'change'],
					},
					'act_duration': {
						required: true,
						message: '请填写演奏时长',
						trigger: ['blur', 'change'],
					}
				},
				// 查询学生信息参数
				searchs: null,
				// 参赛组别
				groupList: null,
				// 二级参赛组别
				subGroupList:null,
				// 学生信息
				studentInfo: null,
				otherInfo: {
					type_name: null, // 大赛名称
					group_id: null, // 选中组别id
					all_group_name: null, // 选中组别值
					act_song: null, // 演奏曲目
					act_duration: null // 演奏时长
				},
				// 用户身份
				status: this.$store.state.status
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.form.setRules(this.rules)
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onShow() {
			if (this.status == 'student') {
				this.getStudentInfo()
			}
			uni.$on('addStudentInfo',(obj)=>{
				this.searchs = obj.document
				this.searchStudentInfo()
			})
		},
		methods: {
			onGameStudenList(){
				this.navigateTo('gameStudenList')
				uni.$once('search',(res)=>{
					this.searchs = res.sn
					this.searchStudentInfo()
				})
			},
			// 时间选择控件格式化
			formatter(type, value) {
				if (type === 'hour') {
					return `${value}分`
				}
				if (type === 'minute') {
					return `${value}秒`
				}
				return value
			},
			// 跳转添加学生信息
			toAddStudentInfo() {
				this.navigateTo("/pages/pages_mine/public/mineStudentInfo?type=add&back=1")
			},
			// 查询学生信息
			searchStudentInfo() {
				this.studentInfo = null
				this.$http.searchStudentInfo({
					document_nums: this.searchs
				}).then(res => {
					this.studentInfo = res
					this.getGroup()
				}).catch(err => {
					uni.$u.toast(err.msg)
				})
			},
			// 跳转修改信息
			toStudentEditInfo() {
				this.navigateTo("/pages/pages_mine/student/studentEditInfo?type=update")
			},
			// 选择组别
			groupChange(e) {
				this.cate_id = e
				this.otherInfo.group_id = null
				this.otherInfo.all_group_name = null
				this.getGroup()
			},
			// 子级分类选择
			subGroupChange(e){
				if(!e) return
				for (let item of this.subGroupList) {
					if (item.value == e) {
						this.otherInfo.all_group_name = item.text
						continue
					}
				}
					this.$refs.form.validateField('group_id')
				
			},
			// 获取报名组别
			getGroup() {
				let param = uni.getStorageSync("signUp")
				this.$http.getGameGroupList({
					...param,
					student_id: this.studentInfo.id,
					cate_id:this.cate_id
				}).then(res => {
					this.otherInfo.type_name = res.type_name
					if(this.cate_id == 0){
						this.groupList = res.data.map(item => {
							return {
								text: item.all_group_name,
								value: item.parent_cate_id,
								disable: item.is_apply == 0 ? true : false
							}
						})
					}else{
						this.subGroupList = res.data.map(item => {
							return {
								text: item.all_group_name,
								value: item.id,
								disable: item.is_apply == 0 ? true : false
							}
						})
					}
					
				})
			},
			// 获取学生信息
			getStudentInfo() {
				this.$http.getStudentInfo().then(res => {
					this.studentInfo = res
					this.getGroup()
					this.filePath = [{
						url: res.document_img
					}]
				})
			},
			// 跳转核对报名信息页面
			toGameCheckSignUp() {
				this.$refs.form.validate().then(res => {
					uni.setStorageSync("signUpInfo", this.otherInfo)
					this.navigateTo("/pages/pages_game/gameCheckSignUp?sn=" + this.searchs)
				}).catch(errors => {
					uni.$u.toast('请检查未填字段')
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.c-header{
			width: 100%;
			.header{
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 9999;
				padding: 0 20rpx;
				box-sizing: border-box;
				box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
				border-top: 1rpx solid #ddd;
			}
			.header-placeholder{
				width: 100%;
				height: 80rpx;
			}
		}
		.c-form {
			.form-headline {
				width: 100%;
				overflow: hidden;
				margin-top: 35rpx;
				display: flex;
				align-items: center;

				&>text {
					flex-shrink: 0;
					margin-right: 15rpx;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.form-search {
				.search-info {
					display: flex;

					.search-info-btn {
						width: 120rpx;
						margin: 0 20rpx;
					}

				}

				.search-hint {
					padding-top: 20rpx;
					font-size: 28rpx;
					text-align: center;
					display: flex;
					justify-content: space-around;
					&>view{
						&>text{
							border-bottom: 1rpx solid #333;
						}
					}
					
				}
			}

			.form-info {
				width: 100%;
				.form_cer_image {
					width: 150rpx;
					height: 200rpx;
				}

			}
		}
	}
</style>
